<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :before-close="handleClose"
    :close-on-click-modal="false">
    <el-form :model="form">
      <el-form-item label="名称" v-if="roleId !== 1">
        <el-input v-model="form.name" :disabled="true" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item :label="roleId == 1 ? '群组名称' : '编码（年）'">
        <el-input v-model="form.encoding" placeholder="请输入群组名称" :disabled="roleId !== 1" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item :label="roleId == 1 ? '定向访问标识' : '金额（元）'">
        <el-input v-model="form.numerical" :placeholder="roleId == 1 ? '请输入定向访问标识' : '请输入金额'" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="流量值" v-if="roleId !== 1">
        <el-input v-model="form.flow" placeholder="请输入金额" autocomplete="off">
          <el-select v-model="form.flowSelect" slot="append" style="width:100px">
            <el-option label="MB" :value="1"></el-option>
            <el-option label="GB" :value="2"></el-option>
          </el-select>
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      title: "",
      edit: "",
      form: {
        name: "",
        encoding: "",
        numerical: "",
        flow: 0,
        flowSelect: 1,
      },
      parentId: "",
      parentVal: {},
    };
  },
  computed: {
    roleId() {
      return JSON.parse(localStorage.getItem("userInfo")).roleId;
    },
  },
  methods: {
    init(val, status) {
      this.title = status;
      this.parentVal = val;
      if (this.title === "编辑") {
        this.edit = val.id;
        if (this.roleId == 1) {
          this.form = {
            name: val.dictionariesName,
            encoding: val.groupName,
            numerical: val.code,
          };
        } else {
          this.form = {
            name: val.dictionariesName,
            encoding: val.dirName,
            numerical: val.dirCode,
            flow: val.flowValue,
            flowSelect: val.flowValueUnit
          };
        }
      } else {
        this.title = "新增";
        this.form = {
          name: val.groupName,
          encoding: "",
          numerical: "",
        };
        this.parentId = 1;
      }
      this.dialogVisible = true;
    },
    handleClose(done) {
      done();
    },
    async submit() {
      if (this.title === "编辑") {
        const params = {
          id: this.edit,
          roleId: JSON.parse(localStorage.getItem("userInfo")).roleId,
          dirName: this.form.encoding,
          dirCode: this.form.numerical,
          flowValue: parseInt(this.form.flow),
          flowValueUnit: this.form.flowSelect
        };
        const res = await this.$api.editGroupOrPriceInfo(params);
        if (res.code === 200) {
          if (this.roleId == 1) {
            this.$emit("query_1");
            this.$message.success("编辑成功");
            this.dialogVisible = false;
          } else {
            this.$emit("query_roleIdNot");
            this.$message.success("编辑成功");
            this.dialogVisible = false;
          }
        }
      } else {
        const params = {
          dicName: this.form.encoding,
          dicCode: this.form.numerical,
          parentId: this.parentId,
        };
        const res = await this.$api.addDic(params);
        if (res.code === 200) {
          this.$emit("query");
          this.$message.success("新增成功");
          this.dialogVisible = false;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-input-group__append {
  background: none;
}
</style>